<template>
  <div class="page goodsListPage">
    <div class="page-waprrer">
      <div class="goodsListPage-header">

      </div>
      <div class="goodsListPage-body">
        <transition-group name="goodsItemSlide">
          <goodsItem
            v-for="(item,index) in goodsItems"
            :selected="false"
            :img="item.imgpath"
            :title="item.name"
            :note="item.sellerpoints"
            :price="item.shop_price"
            :id="item.id"
            :type="3"
            :href="'/goods/' + item.id"
            class="max-body-item"
            :key="item.id"
            @reduce="reduceItem(item.id,index)"
          >
          </goodsItem>
        </transition-group>
        <div class="goodsListPage-body-no" v-if="goodsItems.length === 0">暂无列表</div>

      </div>
      <div class="goodsListPage-footer">
        <div class="footer">
          <div class="footer-left" @click="clearShareList">
            清空清单
          </div>
          <div class="footer-center">
            <div class="input">
              <input type="text" v-model="href">
            </div>
          </div>
          <div class="footer-right">
            <span v-clipboard:copy="href" v-clipboard:success="onCopy">复制</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import goodsItem from "base/goodsItem/goodsItem"
  import {mapGetters, mapMutations} from "vuex";
  import Bus from "common/js/bus"
  import {getGoodsById} from "api/goods";
  import smartPhoto from "smartphoto";
  import "smartphoto/css/smartphoto.min.css";

  let SMARTPHOTO;
  export default {
    name: "goods-list-page",
    data() {
      return {
        goodsItems: [],
        href: ""
      }
    },
    methods: {
      reduceItem(id, index) {
        this.$localStore.reduceShareList(id).then(() => {
          this.href = `http://${window.location.host}/ding/#/goodsList/${this.$localStore.get("sharelist") || -1}`;
          this.goodsItems.splice(index, 1);
          //window.location.href = `http://${window.location.host}/ding/#/goodsList/-1`
        }).catch(() => {
          this.goodsItems.splice(index, 1);
        })
      },
      onCopy() {
        this.$vux.alert.show({
          title: '提示',
          content: '复制成功!',
        })
      },
      getGoodsById(id) {
        if (!id) {
          Bus.$emit("loading-off");
          return
        }
        return getGoodsById({id}).then(Rs => {
          this.goodsItems = Rs.data;
          Bus.$emit("loading-off");
        })
      },
      initSmartPhoto() {
        SMARTPHOTO = new smartPhoto(".img-viwer", {
          resizeStyle: "fit"
        })
      },
      clearShareList() {
        this.goodsItems = [];
        this.$localStore.clearShareList();
        this.$router.go("-1");
      },
      ...mapMutations({
        "setCommonHeader": "SET_COMMON_HEADER"
      })
    },
    computed: {},
    components: {
      goodsItem
    },
    beforeRouteEnter(from, to, next) {
      let List = from.params.list.toString().split(",");
      if (List.length >= 1) {
        Bus.$emit("loading-on");
        next(vm => {
          vm.setCommonHeader(4);
          let shareList = vm.$localStore.get("sharelist");
          if (List[0] === "-1") {
            let href = window.location.href;
            vm.href = href.replace('-1', "") + vm.$localStore.get("sharelist");
            vm.getGoodsById(shareList)
          } else {
            let href = window.location.href;
            vm.href = href;
            vm.getGoodsById(from.params.list);
          }
        })
      }
    },
    mounted() {
      this.initSmartPhoto();
    },
    watch: {}
  }
</script>

<style lang="less">
  .goodsListPage {
    &-header {
      height: 0.9rem;
      line-height: 0.9rem;
      width: 100%;
      text-align: center;
      background: #fff;
    }
    &-body {
      position: absolute;
      top: 0.9rem;
      left: 0;
      right: 0;
      bottom: 0.7rem;
      overflow-x: hidden;
      overflow-y: auto;
      &-no {
        height: 1rem;
        line-height: 1rem;
        text-align: center;
        font-size: 0.28rem;
        color: #666;
      }
    }
    &-footer {
      height: 0.7rem;
      position: absolute;
      bottom: 0;
      width: 100%;
      background: rgba(254, 101, 101, 1);
      .footer {
        width: 100%;
        height: 100%;
        display: flex;

        &-left {
          width: 1.2rem;
          height: 0.7rem;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 0.24rem;
          color: #fff;
        }
        &-center {
          width: 4rem;
          height: 0.7rem;
          display: flex;
          justify-content: center;
          align-items: center;

          .input {
            width: 95%;
            border-radius: 5px;
            border: none;
            position: relative;
            left: 2.5%;
            height: 0.4rem;
            text-indent: 0.2rem;
            font-size: 12px;
            background: #fff;
            input {
              width: 90%;
              height: 90%;
              position: relative;
              left: 0%;
              top: 1%;
              border: none;
            }
          }
        }
        &-right {
          width: 1.2rem;
          height: 0.7rem;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            color: #fff;
            font-size: 0.24rem;
          }
        }
      }
    }
  }
</style>
